<template>
	<view class="evaluate-list">
		<view class="Technician-info">
			<view class="evaluate-item" v-for="(item,i) in infoDataList" :key="i">
				<view class="user-header flex-y-center">
					<view class="user-img flex-grow-0">
						<image :src="item.jsAvatarPath" mode=""></image>
					</view>
					<view class="user-name flex-grow-1">
						{{item.jsNickName}}
					</view>
					<view class="user-time flex-grow-0">{{item.createTime}}</view>
				</view>
				<view class="evaluate-cont">
					<view class="evaluate-text">
						{{item.healthType}}-档案记录
					</view>
					<view class="TextArea">
						{{item.serviceSummary}}
					</view>
					<view class="evaluate-imagelist" v-if="item.ossVoListPath&&item.ossVoListPath.length">
						<view class="image-box" v-for="v in item.ossVoListPath">
							<!-- <image :src="v.url" mode="aspectFill"></image> -->
							<uv-image :src="v.url" width="91px" height="91px"></uv-image>
						</view>
					</view>
					<view class="score-list">
						<view class="score-item">
							<view class="score-name">敏感区域：</view>
							<text>{{item.sensitiveAreas}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appUserId: null,
				infoDataList: []
			}
		},
		onLoad(option) {
			this.appUserId = option.appUserId
			this.getList();
		},
		methods: {

			async getList() {
				// 根据客户id,查询服务后的档案记录
				const res = await this.muajax.getEvaluateCustomerId({}, {
					urlRewrite: url => `${url}/${this.appUserId}`
				});
				this.infoDataList = res.data
				// this.infoDataList

			},
		}
	}
</script>

<style scoped lang="less">
	image {
		width: 100%;
		height: 100%;
	}

	.evaluate-list {
		background: #fff;

		.evaluate-item {
			padding: 30rpx;
			border-bottom: 1px solid #f1f1f1;

			.user-img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 22rpx;
			}

			.user-name {
				color: #333333;
			}

			.user-time {
				color: #666666;
			}
		}

		.evaluate-cont {
			margin: 20rpx 0px;

			.evaluate-text {
				color: #666666;
			}
		}

		.evaluate-imagelist {
			display: flex;
			flex-wrap: wrap;

			.image-box {
				width: 180rpx;
				height: 180rpx;
				margin: 10rpx;

			}
		}

		.score-item {
			display: flex;
			align-items: center;
			color: #666;
		}
	}

	.TextArea {
		// min-height: 148rpx;
		background-color: #f1f1f1;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		color: #333333;
		font-size: 24rpx;
		margin: 20rpx 0px;
	}
</style>